p5.strands とは？

p5.strands（ストランズ）の名前は、シェーダーが情報を順次処理するのではなく、並列に処理する様子に由来しています。

通常の p5.js では、命令を 1 つずつ順番に実行することに慣れています。例えば、circle(10, 10) を呼び出してキャンバスに「点 (10, 10) に白い円を描け」と指示します。そして、次々と命令を出し続け、レイヤーを重ねるように前の図形の上に描画していきます。

対照的に、シェーダーはすべての頂点またはピクセルに対して一連の命令を同時に適用します。各ピクセルは独立して同じルールに従いますが、その位置に基づいてユニークな結果を生み出します。明示的に円を描くのではなく、各ピクセルに「君は (10, 10) を中心とした円の中にいるかい？ もしそうなら色を変えてくれ」と個別に尋ねるのです。

また、「ストランド」という名前は、シェーダーを最初から構築することなく、レンダリングの特定の側面を修正するための**アクセスポイント（差し込み口）**も指しています。

まとめると、p5.strands は GLSL の上に構築された JavaScript ベースのシェーディング言語です。これにより、GLSL を文字列リテラルとして書くことなく、通常の .js ファイルにシェーダーを記述できます。セットアップのコードを削減し、p5.js の他の部分と統合することで、シェーダーの学習と使用を p5.js の核心に近づけています。

p5.strands を使ってみる：セットアップ

最小限のシェーダーの例を作成して、p5.strands の主要な概念を導入しましょう。p5.strands を使えば、JavaScript を使用して既存のシェーダーの特定のセクション（「ストランド」として知られています）を修正できます。

スケッチのソースコードを見てみましょう：

let firstShader;

// p5.strands を使用したコールバック関数。
// baseColorShader() をどのように修正するかを決定します。

function firstShaderCallback() {
  getFinalColor((color) => {
    color = [1, 1, 0, 1]; // RGBA 形式の黄色 (0.0 から 1.0 の範囲)
    return color;
  });
}

async function setup() {
  createCanvas(200, 200, WEBGL);
  pixelDensity(1);
  // p5.strands は、シェーダーの modify 関数を呼び出すことで作成されます
  firstShader = baseColorShader().modify(firstShaderCallback);
}

function draw() {
  background(0);
  shader(firstShader);
  sphere(80);
}

このスケッチを実行すると、黄色の球体が表示されます。

ここで何が起きているのか？

1. シェーダー: p5.js は WebGL モードの背後ですでにシェーダーを使用しています。p5.strands は、これらを修正できるようにシェーダーの一部を公開します。
2. ストランド (Strands): 「ストランド」とは、修正可能なシェーダーの特定の部分のことです。この例では、getFinalColor はオブジェクトの最終的な色を変更できるストランドです。
3. シェーダーの修正 (Modifying shaders): パターンは次のようになります：

firstShader = baseColorShader().modify(firstShaderCallback);

4. ベクトル (Vectors): シェーダーは「ベクトル」を扱います。これは、色や位置などを表す数値の集まりです。p5.strands では、配列構文 [x, y, z, w] または vec4() 関数を使用してベクトルを作成できます。

利用可能なシェーダー

p5.strands は以下の修正可能なシェーダーを提供しています：

• baseColorShader: WebGL モードのデフォルトシェーダー。
• baseMaterialShader: シーン内にライトがある場合に自動的に適用されます。
• baseNormalShader: normalMaterial() を呼び出すことで適用されます。
• baseStrokeShader: noStroke() を呼び出さない限り適用され、オブジェクトに線を引きます。
• baseFilterShader: ポストプロセッシングフィルターを作成するためのテンプレート。

最初の p5.strands による変更が準備できたので、次はより複雑なシーンを作成してみましょう！ baseColorShader と baseStrokeShader を使用して 3D オブジェクトを作成し、baseFilterShader で後処理を適用して最終的な結果を向上させます。